<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ocr-demo</title>
  <script src="../common/cos-js-sdk-v5.min.js"></script>
  <style>
    html,body {
      margin: 0;
      padding: 0;      
    }
    .container {        
      padding: 20px;
    }
    #err-msg {
      font-size: 12px;
      color: #ff0000;
    }
    .ocr-area {
      margin: 20px;
    }
    .img-area {
      width: 700px;      
      height: auto;      
    }
    .img-area img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>      
      <input type="file" id="file-selector"/>
      <span id="err-msg"></span>
    </div>
    <div class="ocr-area">
      <p>OCR分析结果：</p>
      <ul id="ocr-results"></ul>
    </div>
    <div class="img-area">
      <img src="" id="sourceFile"/>
    </div>
  </div>
  <script>

    /*
      准备工作：
      1. 在cos控制台创建一个存储桶，可拿到存储桶名称和地域，即Bucket，Region。
      2. 进入存储桶配置页面，设置对应的跨域规则（简单调试可将来源Origin设置为*）。
      3. 进入访问管理控制台，获取API密钥，即SecretId，SecretKey。
    */

            
    // 注意：以下初始化方式仅供联调测试使用，为了安全起见，请勿在生产环境直接暴露密钥。
    // 生产环境请参考各语言SDK签名实现。https://cloud.tencent.com/document/product/436/7778#sdk-.E7.AD.BE.E5.90.8D.E5.AE.9E.E7.8E.B0

    // 密钥请在访问管理控制台获取。https://console.cloud.tencent.com/cam/capi
    let cos = new COS({
      SecretId: 'AKID*****************************',
      SecretKey: '********************************'
    });

    // 存储桶配置请在cos控制台获取。https://console.cloud.tencent.com/cos/bucket
    // 格式参考：Bucket: 'abc-1250000000', Region: 'ap-shanghai'
    let bucketConf = {
      Bucket: '***-125********',
      Region: '**-*****'
    };


    let fileSelectorEle = document.getElementById('file-selector'),
        errMsgEle = document.getElementById('err-msg'),
        sourceFileEle = document.getElementById('sourceFile'),
        ocrResultsEle = document.getElementById('ocr-results');

    fileSelectorEle.onchange = function(e) {

      errMsgEle.innerHTML = '';
      sourceFileEle.setAttribute('src', '');
      ocrResultsEle.innerHTML = '';

      let file = this.files[0];      

      if (!file) {
        errMsgEle.innerHTML = '未发现上传文件';
        return;
      }        

      if(!['image/jpeg', 'image/png', 'image/bmp', 'application/pdf'].includes(file.type)) {        
        e.target.value = '';
        errMsgEle.innerHTML = '当前仅支持图片格式：PNG、JPG、JPEG、BMP 及 PDF 文件';        
        return;                            
      }    
      
      let basicParams = {
        ...bucketConf,
        Key: file.name
      };
      
      cos.putObject({
          ...basicParams,
          Body: file,
          onProgress: progressData => console.log('上传中，' + JSON.stringify(progressData))
      }, (err, data) => {  
        if(err) {
          errMsgEle.innerHTML = '上传对象失败，请在console查看报错信息';
          console.log(JSON.stringify(err));
          return;
        }        

        sourceFileEle.setAttribute('src', '//'+data.Location);
        ocrResultsEle.innerHTML = '<li>分析中...</li>';

        cos.request({
          ...basicParams,
          // OCR请求参数配置可参考 https://cloud.tencent.com/document/product/436/64324
          Query: {
            'ci-process': 'OCR',
            'type': 'general'                
          }              
        }, (err, data) => {
          
          if(err) {
            errMsgEle.innerHTML = 'OCR分析失败，请在console查看报错信息';
            console.log(JSON.stringify(err));
            return;
          }

          let resp = data.Response || {};
          let results = resp.TextDetections || [];

          ocrResultsEle.innerHTML = results.map(item => '<li>' + item.DetectedText + '</li>').join('');

        })

      });

    }
  </script>
</body>
</html>